<!--
*
* 首页
*
*
*
-->
<template>
    <div class="main-container" :class="screenTypeClass">
        <Sidebar />
        <ContentBody />
    </div>
</template>
  
<script setup>
import Sidebar from './components/sidebar/sidebar.vue';
import ContentBody from './components/content-body/content-body.vue';
import { checkDevice } from '@/utils/tools-util';
import { ElNotification } from 'element-plus';

import { storeToRefs } from 'pinia';
import { websiteStore } from '@/store/system/website';
const { screenType } = storeToRefs(websiteStore());

// ========================= 实列挂载之后调用 =========================
onMounted(() => {
    // if(!checkDevice()) return;
    // ElNotification({
    //     title: '提示',
    //     message: '移动端适配正在施工当中...',
    //     type: 'warning',
    //     position: 'top-left',
    //     duration: 8000
    // });
});

// ========================= 计算属性 =========================
const screenTypeClass = computed(() => {
    return {
        [`main-${screenType.value}`]:true
    }
});
</script>
  
<style lang="scss" scoped>
    @import '@/theme/animations';
    .main-container{
        display: grid;
        max-width: 1200px;
        min-height: 100vh;
        grid-template-rows: auto 1fr auto;
        margin: auto;
        position: relative;
        grid-gap: 16px;
        grid-template-columns: min(30%, 280px) auto;
        animation: fade-in-bottom 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    }
    // 移动端适配
    .main-medium-screen, .main-small-screen, .main-extraSmall-screen{
        display: block;
        width: 100%;
    }
</style>
  